<template>
  <div class="main">
    <div class="InfoLabelList">
      <header-back v-show="!hideHeader">
        <b class="my-center" slot="my-center">全部专家</b>
      </header-back>
      <scroller ref="scrollerBottom" :on-infinite="handleReachButton" :noDataText="noDataText">
        <div>
          <div style="height:1rem" v-show="!hideHeader"></div>
          <div class="all-expert-box">
            <div class="expert flex-h" v-for="(item,index) in commodityList" :key="item.id">
              <div class="left" @click="goExpertHomePage(item.id,item.name)">
                <img :src="item.avatar" alt />
              </div>
              <div
                class="center flex1"
               @click="goExpertHomePage(item.id,item.name)"
              >
                <h2>{{item.name}}</h2>
                <b>{{item.agencyName}}{{item.title}}</b>
                <span>
                  <i>粉丝</i>
                  <i class="count">{{item.fansCount}}</i>
                  <i class="title">回答</i>
                  <i class="count">{{item.answerCount}}</i>
                  <i class="title">课程</i>
                  <i class="count">{{item.courseCount?item.courseCount:item.articleCount?item.articleCount:0}}</i>
                </span>
              </div>
              <div class="right">
                <span
                  :class="item.followStatus?'notfollow':''"
                  @click="agencyUserFollowUser(item,index)"
                >{{item.followStatus?'已关注':'+关注'}}</span>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { pageInfo, agencyUserFollowUser } from "~/api/identity";
import headerBack from "~/components/headerBack";
export default {
  components: {
    headerBack
  },
  data() {
    return {
      clickFollow: false,
      value: "",
      currentPage: 1,
      commodityList: [],
      noDataText:"",
      hideHeader: false
    };
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true      
    }
  },
  mounted: function() {
     this.$visit("ExpertList")
    this.pageInfo();
  },
  methods: {
      goExpertHomePage(professorId, professorName) {
      this.$store.commit("changeexpertId", professorId);
      this.$store.commit("changeexpertName", professorName);
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: 'expertHomepage',
          query: {
            professorId: professorId,
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        })
      } else {
        this.commonJs.gopush("expertHomepage?professorId=" + professorId);
      }
    },
    //关注开始
    agencyUserFollowUser(item, index) {
      this.$loading('open');
      let actions;
      item.followStatus === 1 ? (actions = 0) : (actions = 1);
      agencyUserFollowUser({action: actions, toUserId: item.id})
        .then(res => {
          if (res.code === "0") {
            item.followStatus === 1? (item.followStatus = 0): (item.followStatus = 1);
            this.$vux.taost.text(res.message);
          } else {
            this.$vux.taost.text(res.data.message);
          }
          this.$hideLoading();
        })
        .catch(err => {
          this.$hideLoading();
        });
    },

    //关注结束
    chooseExpert(name, professorId) {
      this.$store.commit("changeexpertId", professorId);
      this.$store.commit("changeexpertName", name);
      this.$router.back();
    },
    pageInfo() {
      this.$loading('open')
      let obj = {
        pageNo: this.currentPage,
        pageSize: 10
      };
      pageInfo(obj)
        .then(res => {
        
          if (res.code == "0") {
            this.totlaPages = res.data.professorPage.pages;
            this.commodityList = res.data.professorPage.list;
            this.noDataText="没有更多专家了"
          }
           this.$hideLoading()
        })
        .catch(err => {
            this.$hideLoading()
        });
    },

    handleReachButton(done) {
      if (this.currentPage < this.totlaPages) {
        this.currentPage = this.currentPage + 1;
        pageInfo({
          pageNo: this.currentPage,
          pageSize: 10
        }).then(res => {
          if (res.code == "0") {
            let newArr = res.data.professorPage.list;
            this.commodityList = this.commodityList.concat(newArr);
            this.totlaPages = res.data.professorPage.pages;
            done();
          }
        });
      } else {
        done(true);
        return;
      }
    }
  }
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.my-center {
  font-weight: 600;
}

.InfoLabelList {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.expert-box {
  width: 100%;
  height: 4rem;
  background: rgba(247, 247, 250, 1);
}
.all-expert-box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  .expert {
    width: 100%;
    height: 2.1rem;
    border-bottom: 1px solid #ededed;
    padding: 0.25rem 0;
    box-sizing: border-box;
    // border-radius: 0.1rem;
    margin-bottom: 0.2rem;
    .left {
      width: 1.1rem;
      img {
        width: 1.1rem;
        height: 1.1rem;
        display: block;
        border-radius: 50%;
      }
    }
    .center {
      padding-left: 0.25rem;
      box-sizing: border-box;
      h2,
      b,
      span {
        display: block;
      }
      h2 {
        font-size: 0.3rem;
        font-weight: 600;
        // height: 0.4rem;
      }
      b {
        width: 100%;
        font-size: 0.26rem;
        color: #949494;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // margin-top: 0.05rem;
      }
      span {
        //  margin-top: 0.05rem;
        i {
          font-size: 0.26rem;
          color: #949494;
        }
        .count {
          margin-left: 0.1rem;
        }
        .title {
          margin-left: 0.2rem;
        }
      }
    }
    .right {
      width: 1.2rem;
      span {
        display: block;
        width: 100%;
        height: 0.6rem;
        text-align: center;
        line-height: 0.6rem;
        font-size: 0.26rem;
        font-family: "PingFangSC-Regular", PingFangSC;
        font-weight: 400;
        color:  @assistColor;
        border-radius: 0.3rem;
        border: 1px solid  @assistColor;
      }
      .notfollow {
        background: #fafafa;
        color: #bbbbbb;
        border: 1px solid #fafafa;
      }
    }
  }
}
</style>
